<template>
<div class='consultingService'>
  <div class='banner_top'>
    <h1>园区产业服务</h1>
    <div class='title_top'>为园区提供从运营到招商到企业数字赋能一体化服务</div>
  </div>
  <div class='third-level'>
    <div class='title'>
      <img src="~@a/img/consultingService/left_t.png" alt="">
      <div class='title-name'>
        <h2>园区产业服务介绍</h2>
        <div>提供园区托管运营、园区招商会议、智慧园区建设、营商环境监测、园区能耗监测等服务</div>
      </div>
      <img src="~@a/img/consultingService/right_t.png" alt="">
    </div>
    <div class='tabList'>
      <div class='tab-item' :class="active==1?'active':''" @click="active=1">
        <div class='content'>园区托管</div>
      </div>
      <div class='tab-item' :class="active==2?'active':''" @click="active=2">
        <div class='content'>招商会议</div>
      </div>
      <div class='tab-item' :class="active==3?'active':''" @click="active=3">
        <div class='content'>金融综合服务</div>
      </div>
      <div class='tab-item' :class="active==4?'active':''" @click="active=4">
        <div class='content'>智慧园区</div>
      </div>
      <div class='tab-item' :class="active==5?'active':''" @click="active=5">
        <div class='content tabContentLast'>营商环境</div>
      </div>
    </div>
    <div class='tab-main'>
      <div class='tab-content-left tabimg1'>
        <img v-show="active==1" src="~@a/img/consultingService/park_1.png" alt="">
        <img v-show="active==2" src="~@a/img/consultingService/park_2.png" alt="">
        <img v-show="active==3" src="~@a/img/consultingService/park_3.png" alt="">
        <img v-show="active==4" src="~@a/img/consultingService/park_4.png" alt="">
        <img v-show="active==5" src="~@a/img/consultingService/park_5.png" alt="">
      </div>
      <div class='tab-content-right'>
        <div v-show="active==1" class='title'>提供一站式产业链园区托管运营服务</div>
        <div v-show="active==2" class='title'>提供线上线下一体化的招商洽谈会</div>
        <div v-show="active==4" class='title'>提供以产业大脑、5G物联网为核心的新一代智慧园区服务</div>
        <div v-show="active==5" class='title'>提供园区营商环境监测和管理服务</div>
        <div v-show="active==3" class='title'>园区金融综合服务平台</div>
        <div v-show="active==1" class='desc'>依托上海市相关重点重点园区包括临港和张江等资源，整合国有和民营基金公司，合作央企建设集团公司，采用平台+基金+项目模式新建、托管运营各类园区或园中园</div>
        <div v-show="active==2" class='desc'>通过我们的产业链大数据平台，垂直产业链邀请目标企业，提供一站式线下的招商会议服务，同时具备线上招商会议服务能力</div>
        <div v-show="active==4" class='desc'>以5G园区建设为基础，以智能物联网为核心，聚焦园区产业大脑和一流营商环境服务，建设涵盖PC、数字屏及移动段的新型智慧园区服务平台</div>
        <div v-show="active==5" class='desc'>从企业与园区发生第一次接触开始，全程监控企业办事流程进度，系统自动提供并推送办事卡点，赌点，并做好数据深度分析和对比挖掘</div>
        <div v-show="active==3" class='desc'>通过核心变电设备和主分支电路的物联网监控，了解园区各企业和主要机构负荷，实施自动切换供电线路和设备，实现园区电力线路安全监管和能耗管理</div>
      </div>
      <div class='btn' @click="toPage('experience')">获取产品演示</div>
    </div>
  </div>
  <div class='four-level'>
    <div class='title'>
      <img src="~@a/img/consultingService/left_t.png" alt="">
      <div class='title-name'>
        <h2>园域产业服务优势</h2>
      </div>
      <img src="~@a/img/consultingService/right_t.png" alt="">
    </div>
    <div class='advantage'>
      <div class='advantage-item'>
        <div class='advantage-item-title'>海量资源</div>
        <div class='advantage-item-desc'>通过大数据整合各位园区服务机构，包括且不限于工商注册、人力资源、企业服务、金融服务等，并通过标签和位置信息实现智能匹配和撮合</div>
      </div>
      <div class='advantage-item'>
        <div class='advantage-item-title'>精准对接</div>
        <div class='advantage-item-desc'>我们的产业服务均聚焦产业链，并通过各类标签信息实现智能撮合和精准对接</div>
      </div>
      <div class='advantage-item'>
        <div class='advantage-item-title'>产业链服务</div>
        <div class='advantage-item-desc'>我们所有服务的基础链接均为产业链信息，所有信息的维护的基础均为产业链</div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  data(){
    return{
      active:1
    }
  },
  mounted(){
   
  },
  methods:{
    toPage(name){
      this.$router.push(name)
    }
  }
}
</script>
<style lang='scss' scoped>
.consultingService{
  .banner_top{
    width: 100%;
    height: 180px;
    text-shadow: 0.1em 0.1em 0.2em black;
    background: url(~@a/img/consultingService/zxbg1.png) no-repeat;
    background-size: 100% 100%;
    text-align: center;
    font-size: 3.5rem;
    font-family: MicrosoftYaHeiUI;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    h1{
      color: #fff;
      font-size: 20px;
    }
    .title_top{
      color: #fff;
      font-size: 14px;
      margin-top: 2.125rem;
      // padding:00 20px;
      font-weight: 400;
    }
  }
}
.title{
  font-family: MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
  font-weight: 700;
  color: #2d3937;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: .5rem;
  img{
    max-height: 10px;
  }
  .title-name{
    text-align: center;
    margin: 0 10px;
    h2{
      font-size: 20px;
    }
    div{
      color: #8a989c;
      font-size: 14px;
      margin-top: 1rem;
      font-family: MicrosoftYaHeiUI;
      font-weight: 400;
    }
  }
}
.third-level{
  background-color: #fff;
  padding-top: 2rem;
}
.tabList{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
  .tab-item{
    width: 18%;
    height: 44px;
    background: #f4f9fc;
    color: #2d3937;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .content{
    width: 100%;
    height: 1.6rem;
    border-right: .0625rem solid #dde3e5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-family: MicrosoftYaHeiUI;
    img{
      width: 1.75rem;
      margin-right: .625rem;
    }
  }
  .tabContentLast{
    border-right: .0625rem solid transparent!important;
  }
  .active{
    background: #2091d3!important;
    color: #fff!important;
    position: relative;
    .content{
      color: #fff!important;
      border-right: .0625rem solid #2091d3!important;
    }
    &::after{
      position: absolute;
      content:' ';
      bottom: -.2rem;
      left: 0;
      right: 0;
      margin: auto;
      background: #2091d3;
      width: .6rem;
      height: .6rem;
      transform: rotate(45deg);
    }
  }
}
.tab-main{
  width: 100%;
  display: flex;
  // justify-content: center;
  // margin-bottom: 2rem;
  position: relative;
  text-align:left;
  padding-bottom: 100px;
  .tab-content-left {
    width: 160px;
    margin-left: 16px;
    padding-top: 24px;
    img{
      margin-left: 16px;
      width: 108px;
    }
  }
  .tab-content-right{
    width: 182px;
    margin-right: 16px;
    position: relative;
    .title{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      height: 1.875rem;
      font-size: 14px;
      font-family: MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
      font-weight: 700;
      color: #2d3937;
      // line-height: 1.875rem;
    }
    .desc{
      width: 100%;
      font-size: 12px;
      font-family: MicrosoftYaHeiUI;
      color: #2d3937;
      line-height: 21px;
      margin-top: 8px;
      margin-bottom: 12px;
    }
  }
  .btn{
    position: absolute;
    bottom:40px;
    left: 50%;
    transform: translateX(-50%);
    width: 144px;
    height: 38px;
    background: -webkit-linear-gradient(
315deg
,#fcc560,#feb15a);
    background: linear-gradient(
135deg
,#fcc560,#feb15a);
    -webkit-border-radius: 24px;
    border-radius: 24px;
    text-align: center;
    line-height: 38px;
    font-size: 16px;
    color: #2d3937;
    margin: 0px auto 0;
    cursor: pointer;
    font-weight: 700;
  }
}
.four-level{
  background-color: #f4f9fc;
  padding-top: 2rem;
  height: 320px;
  text-align: left;
  .advantage{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 1rem 10px;
    .advantage-item{
      width: 31%;
      height: 220px;
      background: #fff;
      box-shadow: 0 0.125rem 0.5rem 0 #dde3e5;
      position: relative;
      padding: 0.5rem 10px 20px;
      box-sizing: border-box;
      text-align: center;
      .advantage-item-title{
        font-size: 14px;
        font-family: MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
        font-weight: 700;
        color: #2d3937;
        line-height: 2.375rem;
      }
      .advantage-item-desc{
        font-size: 12px;
        text-align: left;
        font-family: MicrosoftYaHeiUI;
        color: #5b6e74;
      }
    }
  }
}
.banner_center{
  width: 100%;
  height: 160px;
  background: url(~@a/img/consultingService/bgcenter.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  text-align: left;
  padding-left: 20px;
  .banner_center_top{
    font-size: 16px;
    color: #fff;
    margin-bottom: 12px;
  }
  .banner_center_btn{
    font-size: 14px;
    color: #fff;
    margin-top: 16px;
    line-height: 29px;
  }
}
.five-level{
  padding-top: 1.5rem;
  background: url(~@a/img/consultingService/bg_five.png) no-repeat;
  background-size: 100% 100%;
  padding-bottom: 20px;
  .witness{
    width: calc(100% - 20px);
    display: flex;
    flex-wrap: wrap;
    margin: 20px auto;
    justify-content: space-between;
    align-items: center;
    background:#fff;
    padding:10px;
    .witness-item{
      width: 49%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content:center;
      cursor: pointer;
      .img1{
        width: 100%;
      }
      .img_l{
        width: 30%;
      }
      .img_r{
        width: 60%;
      }
    }
  }
}
</style>